<template>
    <div class="content">

        <div class="mb-2">
            <el-button type="primary" @click="executeFireActionTaskRef.showAddExecuteFireActionTask(managementId)">
                新增
            </el-button>
            <el-button @click="getList">刷新</el-button>
        </div>

        <el-table :data="tableData" v-loading="loading" border>
            <el-table-column prop="adduser_id" label="任务下发人" width="180" />
            <el-table-column prop="receiver_id" label="任务接收人" width="180" />
            <el-table-column prop="adddate" label="任务下发时间" width="180" />
            <el-table-column prop="receivedate" label="接收时间" width="180" />
            <!--            <el-table-column prop="taskcontent" label="任务内容" width="200"/>-->
            <el-table-column prop="stateText" label="状态" width="100" />
            <el-table-column fixed="right" align="center" label="操作" width="200">
                <template #default="scope">
                    <el-button type="primary" size="small" link
                        @click="executeFireActionTaskRef.showEditExecuteFireActionTask(scope.row)"
                        v-if="scope.row.state === 0">
                        <el-icon class="me-1">
                            <Edit />
                        </el-icon>
                        编辑
                    </el-button>
                    <el-button size="small" link @click="executeFireActionTaskDetailRef.showDetail(scope.row.task_id)">
                        <el-icon class="me-1">
                            <Delete />
                        </el-icon>
                        详情
                    </el-button>
                    <el-button type="danger" size="small" link @click="deleteHandle(scope.row.task_id)"
                        v-if="scope.row.state === 0">
                        <el-icon class="me-1">
                            <Delete />
                        </el-icon>
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>


        <pagination v-show="total > 0" v-model:page="paging.pageNum" v-model:limit="paging.pageSize" :total="total"
            @pagination="getList" />

        <div class="footer">
            <!-- 取消 -->
            <el-button @click="closeDrawerHandle">关闭</el-button>
        </div>
    </div>
    <AddEditExecuteFireActionTask ref="executeFireActionTaskRef" @refresh-list="getList" />
    <ExecuteFireActionTaskDetail ref="executeFireActionTaskDetailRef" />
</template>

<script setup>
import { Delete, Edit } from "@element-plus/icons-vue";
import { deleteEmergencyActionTask, getTaskListByEmergencyActionId } from "@/api/FireAction/ExecuteFireAction.js";
import AddEditExecuteFireActionTask from "@/components/ExecuteFireAction/AddEditExecuteFireActionTask.vue";
import { useTemplateRef } from "vue";
import ExecuteFireActionTaskDetail from "@/components/ExecuteFireAction/ExecuteFireActionTaskDetail.vue";
import PageEnum from "@/enum/PageEnum.js";

const props = defineProps({
    onCloseDrawer: Function  // 接收父组件传递的关闭方法
})
const loading = ref(false)
const total = ref(0)
const paging = ref({
    // 页码
    pageNum: 1,
    // 分页数量
    pageSize: PageEnum.SIZE
})

const managementId = inject('managementId', '')
const tableData = ref([])

const executeFireActionTaskRef = useTemplateRef('executeFireActionTaskRef')
const executeFireActionTaskDetailRef = useTemplateRef('executeFireActionTaskDetailRef')

onMounted(() => {
    getList()
})

// 获取列表
const getList = async () => {
    loading.value = true
    const res = await getTaskListByEmergencyActionId(managementId.value)
    total.value = res.total
    tableData.value = res.rows
    loading.value = false
    // console.log('任务列表', res)
}

// 取消事件
const closeDrawerHandle = () => {
    props.onCloseDrawer()
}

// 删除任务
const deleteHandle = async (taskId) => {
    await deleteEmergencyActionTask(taskId)
    await getList()
}
</script>

<style scoped lang="scss">
.content {
    padding-bottom: 5.625rem;

    .footer {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 50%;
        background-color: #fff;
        padding: var(--el-drawer-padding-primary);
        text-align: right;
        border-top: 0.0625rem solid var(--el-color-info-light-9);
    }
}
</style>